<template>
  <div id="mainthr" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'myLine',
  data() {
    return {};
  },
  props: {
    dataSource: {
      type: Object,
      default: []
    }
  },
  watch: {
    dataSource: {
      handler(nl, ol) {
        this.initEchart();
      },
      deep: true
    }
  },
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      const builtList = [];
      this.dataSource.built.map(item => {
        let itemData = [];
        for (const key in item) {
          itemData.push(item[key]);
        }
        builtList.push(itemData);
      });
      const underConstructionList = [];
      this.dataSource.underConstruction.map(item => {
        let itemData = [];
        for (const key in item) {
          itemData.push(item[key]);
        }
        underConstructionList.push(itemData);
      });
      var chartDom = document.getElementById('mainthr');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: ['#43CF7C', '#477BFF'],
        grid: {
          left: '1%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        tooltip: {
          // trigger: 'axis'
          trigger: 'item',
          formatter: params => {
            var color = params.color; //图例颜色
            var htmlStr = '<div>';
            htmlStr += params.value[3] + '<br/>'; //x轴的名称//为了保证和原来的效果一样，这里自己实现了一个点的效果
            htmlStr +=
              '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
              color +
              ';"></span>'; // 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
            //htmlStr += '<span style="color:'+color+'">';//添加一个汉字，这里你可以格式你的数字或者自定义文本内容
            htmlStr +=
              params.value[0] + '：' + '<span style="color:' + '#43CF7C' + '">' + params.value[1] + 'm' + '</span>'; // 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
            //htmlStr += '</span>';
            htmlStr += '</div>';
            return htmlStr;
          }
        },
        legend: {
          data: ['已建', '在建'],
          left: 'right',
          textStyle: {
            color: '#fff' //字体颜色
          },
          top: 10
        },
        xAxis: [
          {
            type: 'value',
            scale: true,
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)' //x轴轴线颜色
              }
            },
            min: 1965, // 起始
            max: 2023 // 终止
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)' //x轴轴线颜色
              }
            }
          }
        ],
        series: [
          {
            name: '已建',
            type: 'scatter',
            emphasis: {
              focus: 'series'
            },
            // prettier-ignore
            data: builtList,
            symbolSize: 5
          },
          {
            name: '在建',
            type: 'scatter',
            emphasis: {
              focus: 'series'
            },
            // prettier-ignore
            data: underConstructionList,
            symbolSize: 5
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }
};
</script>

<style></style>
